<script lang="tsx">
import { defineComponent, ref } from 'vue';
import DraggableArea from '#/components/draggable-area.vue';

interface DraggableItem {
  id: string;
  x: number;
  y: number;
  content: string;
  width?: number;
  height?: number;
}

export default defineComponent({
  name: 'DraggableDemo',
  components: {
    DraggableArea
  },
  setup() {
    const items = ref<DraggableItem[]>([
      {
        id: 'item1',
        x: 50,
        y: 50,
        content: '拖拽元素 1',
        width: 120,
        height: 40
      },
      {
        id: 'item2',
        x: 200,
        y: 100,
        content: '拖拽元素 2',
        width: 120,
        height: 40
      },
      {
        id: 'item3',
        x: 350,
        y: 150,
        content: '拖拽元素 3',
        width: 120,
        height: 40
      }
    ]);

    const showBoundary = ref(true);
    const containerWidth = ref(800);
    const containerHeight = ref(400);

    const handleItemsUpdate = (newItems: DraggableItem[]) => {
      items.value = newItems;
      console.log('元素位置已更新:', newItems);
    };

    const handleItemMoved = (item: DraggableItem) => {
      console.log('元素已移动:', item);
    };

    const addNewItem = () => {
      const newItem: DraggableItem = {
        id: `item${Date.now()}`,
        x: Math.random() * (containerWidth.value - 120),
        y: Math.random() * (containerHeight.value - 40),
        content: `新元素 ${items.value.length + 1}`,
        width: 120,
        height: 40
      };
      items.value.push(newItem);
    };

    const resetPositions = () => {
      items.value = items.value.map((item, index) => ({
        ...item,
        x: 50 + index * 150,
        y: 50 + index * 50
      }));
    };

    const toggleBoundary = () => {
      showBoundary.value = !showBoundary.value;
    };

    return () => (
      <div class="draggable-demo">
        <h2>拖拽范围演示</h2>
        
        <div class="controls">
          <button onClick={addNewItem} class="btn btn-primary">
            添加新元素
          </button>
          <button onClick={resetPositions} class="btn btn-secondary">
            重置位置
          </button>
          <button onClick={toggleBoundary} class="btn btn-info">
            {showBoundary.value ? '隐藏' : '显示'}边界
          </button>
        </div>

        <div class="container-info">
          <p>容器尺寸: {containerWidth.value}px × {containerHeight.value}px</p>
          <p>拖拽范围: 元素完全限制在容器内</p>
        </div>

        <DraggableArea 
          blocks={items.value}
          width={containerWidth.value}
          height={containerHeight.value}
          show-boundary={showBoundary.value}
          onUpdate:blocks={handleItemsUpdate}
          onItem-moved={handleItemMoved}
        />

        <div class="info-panel">
          <h3>当前元素位置:</h3>
          <div class="position-list">
            {items.value.map((item) => (
              <div key={item.id} class="position-item">
                <strong>{item.content}:</strong> x={item.x}, y={item.y}
                <span class="position-info">
                  (右边界: {item.x + (item.width || 100)}, 下边界: {item.y + (item.height || 50)})
                </span>
              </div>
            ))}
          </div>
        </div>

        <div class="instructions">
          <h3>拖拽范围说明:</h3>
          <ul>
            <li>✅ 元素完全限制在容器范围内</li>
            <li>✅ 拖拽时元素不会超出容器边界</li>
            <li>✅ 自动计算容器的实际尺寸</li>
            <li>✅ 支持不同尺寸的元素</li>
            <li>✅ 实时显示元素位置和边界信息</li>
          </ul>
        </div>
      </div>
    );
  }
});
</script>

<style scoped>
.draggable-demo {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.controls {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #545b62;
}

.btn-info {
  background-color: #17a2b8;
  color: white;
}

.btn-info:hover {
  background-color: #138496;
}

.container-info {
  margin: 15px 0;
  padding: 10px;
  background-color: #e9ecef;
  border-radius: 4px;
  font-size: 14px;
}

.container-info p {
  margin: 5px 0;
  font-weight: 500;
}

.info-panel {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.info-panel h3 {
  margin-top: 0;
  color: #495057;
}

.position-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.position-item {
  font-family: monospace;
  font-size: 12px;
  padding: 5px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.position-info {
  color: #6c757d;
  font-size: 11px;
}

.instructions {
  margin-top: 20px;
  padding: 15px;
  background-color: #e8f5e8;
  border-radius: 8px;
  border: 1px solid #c3e6c3;
}

.instructions h3 {
  margin-top: 0;
  color: #2d5a2d;
}

.instructions ul {
  margin: 10px 0;
  padding-left: 20px;
}

.instructions li {
  margin: 5px 0;
  color: #2d5a2d;
}
</style> 
